<template>
  <view class="container">
    <view class="header">
      <view class="box">
        <view>Ⅰ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
      <view class="box">
        <view>Ⅲ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
      <view class="box madd">
        <view>Ⅴ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
      <view class="box">
        <view>Ⅱ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
      <view class="box">
        <view>Ⅳ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
      <view class="box small">
        <view>Ⅴ类</view>
        <view>数量：</view>
        <view>百分比：</view>
      </view>
    </view>
    <view class="index" :style="{height: wh + 'px'}">
      <map :latitude="latitude" :longitude="longitude" :markers="covers" scale="10" :style="{height: 750 + 'px',width: 500 + 'px'}"></map>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 当前设备的可用高度
        wh: 0,
        longitude: 121.428599,
        latitude: 28.661378,
        covers: [{
          latitude: 28.661378,
          longitude: 121.428599,
          iconPath: '/static/c1.png'
        }, {
          latitude: 30.28,
          longitude: 120.15,
          iconPath: '/static/c1.png'
        }]
      }
    },
    onLoad() {
      const sysInIf = uni.getSystemInfoSync()
      this.wh = sysInIf.windowHeight
    },
    methods: {

    }
  }
</script>

<style lang="scss">
  .header {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 280rpx;
    background-image: url(../../static/my-images/block.png);
    background-size: 100%;
    margin-bottom: 3px;

    image {
      width: 100%;
      height: 280rpx;
    }
    
    view {
      width: 33.33%;
      height: 70px;
      font-size: 10px;
      line-height: 16px;
      // background-color: #18B566;
    }
  }

  .index {
    width: 100%;
  }
  
  .box view {
    width: 100%;
    height: 16px;
    margin-top: 5px;
    padding-left: 20px;
  }
 
  .header view:nth-of-type(6) {
    padding-left: 45px;
  }
  
  .box view:nth-of-type(1) {
    font-weight: 700;
  }
  
  .small {
    padding-top: 25px;
    
    view {
      margin: 0;
    }
  }
  
  .madd {
    padding-left: 30px;
  }
</style>

